<template>
	<view class="address-list">
		<view class="list" v-if="address_list && address_list.length > 0">
			<view class="card" v-for="(_item, _index) in address_list" :key="_index">
				<view class="left">
					<view class="address">
						{{_item.shipping_address}}&nbsp;&nbsp;{{_item.shipping_address_detail}}
					</view>
					
					<view class="info">
						{{_item.shipping_name}}({{_item.shipping_sex == "1" ? "先生" : _item.shipping_sex == "2" ? "女士" : ""}})
						&nbsp;&nbsp;&nbsp;
						{{_item.mobile}}
					</view>
					
					<view class="line" v-if="_index < address_list.length"></view>
				</view>
				
				<view class="right">
					<image @click="handle_address_edit(_item)" src="../../../static/address/icon_address_edit.svg" style="width: 50rpx;height: 50rpx;" mode=""></image>
				</view>
			</view>
		</view>
		
		<up-empty v-else mode="address" icon="http://cdn.uviewui.com/uview/empty/address.png"></up-empty>
		<view class="block" style="width: 100%;height: 60rpx"></view>
		<view class="address-add-btn">
			<up-button color="#333333" :customStyle="{height: '100%'}" @click="handle_add_address()" text="新建地址"></up-button>
		</view>
		
		
	</view>
</template>

<script setup>
	import { onMounted,onUpdated, ref, computed} from "vue"
	import { get_address_list } from "../common/api";
	
	const address_list = ref([])
	
	onMounted(() => {
		// 加载地址列表
		fetch_address_list();
	})

	// 获取地址列表
	const fetch_address_list = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const res = await get_address_list({
			user_id: "772"
		})
		
		console.log("############### 获取当前地址列表 ################");
		console.log(res)	
		address_list.value = res || []
		uni.hideLoading();
	}
	
	// 前往编辑地址
	const handle_address_edit = (address_info) => {
		uni.setStorageSync('current_address', address_info)
		uni.navigateTo({
			url: "/pages/Tank/address/address_edit",
			animationType: "pop-in",
			animationDuration: 200
		});
	}
	
	// 前往新建地址
	const handle_add_address = () => {
		uni.removeStorageSync('current_address');
		uni.navigateTo({
			url: "/pages/Tank/address/address_edit",
			animationType: "pop-in",
			animationDuration: 200
		});
	}
	
</script>

<style lang="scss">
	.address-list{
		width: 100%;
		height: 100vh;
		background-color: #f3f4f6;
		
		.list{
			width: 100%;
			height: fit-content;
			display: flex;
			flex-direction: column;
			
			.card{
				width: 100%;
				height: fit-content;
				padding: 35rpx 15rpx 0rpx 65rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				
				.left{
					flex: 0.9;
					height: fit-content;;
					.address{
						width: 100%;
						font-size: 30rpx;
						font-weight: 550;
						color: #333333;
						// overflow: hidden;
						// white-space: nowrap;
						// text-overflow: ellipsis;
						ord-wrap:break-word; 
						word-break:break-all; 
						overflow: hidden
						
					}
					
					.info{width: 100%;font-size: 26rpx;color: #ccc;margin-top: 10rpx;}
					.line{width: 100%;height: 2rpx;background-color: #f3f4f6;margin-top: 35rpx;}
				}
				
				.right{flex: 0.1; height: 100%;display: flex;align-items: center;}
			}
		}
		
		.address-add-btn{
			width: 90%;
			height: 80rpx;
			margin: 0 auto;
		}
	}
</style>